<!--
/* Copyright (c) 2007 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<html>
<head>
  <title>YouTube data API Video Browser</title>
  <link href="video_browser.css" type="text/css" rel="stylesheet"/>
  <script src="video_browser.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
  <div id="titleBar">
    <div id="titleText"><h1>YouTube data API Video Browser</h1></div>
    <div id="searchBox" style="display: none;">
      <form id="searchForm" onsubmit="ytvb.listVideos(this.queryType.value, this.searchTerm.value, 1); return false;">
        <select name="queryType" onchange="ytvb.queryTypeChanged(this.value, this.form.searchTerm);">
          <option value="all" selected="true">All Videos</option>
          <option value="top_rated">Top Rated Videos</option>
          <option value="most_viewed">Most Viewed Videos</option>
          <option value="recently_featured">Recently Featured Videos</option>
        </select>
        <input name="searchTerm" type="text" value="puppy">
        <input type="submit" value="Search">
      </form>
    </div>
    <br />
  </div>
  <br clear="all" />
  <div id="mainSearchBox">
    <h2>Search YouTube:</h2>
    <form id="mainSearchForm" onsubmit="ytvb.listVideos(this.queryType.value, this.searchTerm.value, 1); document.forms.searchForm.searchTerm.value=this.searchTerm.value; ytvb.hideMainSearch(); document.forms.searchForm.queryType.selectedIndex=this.queryType.selectedIndex; return false;">
      <select name="queryType" onchange="ytvb.queryTypeChanged(this.value, this.form.searchTerm);">
        <option value="all" selected="true">All Videos</option>
        <option value="top_rated">Top Rated Videos</option>
        <option value="most_viewed">Most Viewed Videos</option>
        <option value="recently_featured">Recently Featured Videos</option>
      </select>
      <input name="searchTerm" type="text" value="puppy">
      <input type="submit" value="Search">
    </form>
  </div>
  <br clear="all" />
  <div id="searchResults">
    <div id="searchResultsListColumn">
      <div id="searchResultsVideoList">
        <table id="searchResultsVideoListTable">
        </table>
      </div>
      <div id="searchResultsNavigation">
        <form id="navigationForm">
          <input type="button" id="previousPageButton" onclick="ytvb.listVideos(ytvb.previousQueryType, ytvb.previousSearchTerm, ytvb.previousPage);" value="Back" style="display: none;"></input>
          <input type="button" id="nextPageButton" onclick="ytvb.listVideos(ytvb.previousQueryType, ytvb.previousSearchTerm, ytvb.nextPage);" value="Next" style="display: none;"></input>
        </form>
      </div>
    </div>
    <div id="searchResultsVideoColumn">
      <div id="videoPlayer"></div>
      <div id="relatedVideos"></div>
      <div id="userVideos"></div>
    </div> 
  </div>
</div>
</body>
</html>
